
input.ic-input[type=number], input.ic-input[type=search], input.ic-input[type=text], input.ic-input[type=password], input.ic-input[type=datetime],
input.ic-input[type=datetime-local], input.ic-input[type=date], input.ic-input[type=month], input.ic-input[type=time], input.ic-input[type=week],
input.ic-input[type=email], input.ic-input[type=url], input.ic-input[type=tel], input.ic-input[type=color], select.ic-input, textarea.ic-input, .ic-form > .ic-form-row-field > input {
    border-color: $gray-300;
    background-color: $white;
    border: 1px solid $gray-400;
    line-height: 20px;
    height: auto;
    padding: 6px 10px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    transition: border linear .2s,box-shadow linear .2s;
    box-sizing: border-box;
    outline: 0;

    &:focus {
        border-color: $primary;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
}

input.ic-input[type=radio]:active {
    color: $primary;
    transition: all .2s ease;
}

textarea.ic-input {
    resize: none;
    padding: 10px 10px;
}

.ic-form-row > label {
    font-size: .85em;
}

.ic-form-row > label+* {
    margin-top: 3px;
}

.ic-form-row.error input {
    border-color: #FF6060 !important;
}

.ic-input {
    resize: none;
    border: 1px $gray-400 solid;
}

// range

@mixin bs1 {
	box-shadow: 0 1px 3px 0 rgba(#000, 0.12);
}

@mixin bs2 {
	box-shadow: 0 2px 6px 0 rgba(#000, 0.18);
}

@mixin bs3 {
	box-shadow: 0 1px 3px 0 rgba(#000, 0.23);
}

input.ic-input[type=range] {
    border: none;
    display: block;
    padding-top: 7px;
    padding-bottom: 6px;
    margin: 0 auto;
    width: 180px;
    height: 8px;
    background: transparent;
    appearance: none;
    cursor: pointer;

    &:focus {
        outline: none;
    }

    /* 滑块
        ---------------------------------------------------------------*/
    &::-webkit-slider-thumb {
        @include bs2;
        appearance: none;
        margin-top: -3px;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        border: none;
        transition: 0.2s;
    }

    &::-moz-range-thumb {
        @include bs2;
        appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        border: none;
        transition: 0.2s;
    }

    &::-ms-thumb {
        @include bs2;
        appearance: none;
        width: 12px;
        height: 12px;
        border: none;
        border-radius: 100%;
        transition: 0.2s;
    }

    &:active {
        &::-moz-range-thumb {
            @include bs3;
            width: 14px;
            height: 14px;
        }

        &::-ms-thumb {
            @include bs3;
            width: 14px;
            height: 14px;
        }

        &::-webkit-slider-thumb {
            @include bs3;
            margin-top: -4px;
            width: 14px;
            height: 14px;
        }
    }

    /* 轨道
        ---------------------------------------------------------------*/
    &::-webkit-slider-runnable-track {
        @include bs1;
        width: 100%;
        height: 6px;
        cursor: pointer;
        border-radius: 2px;
        border: none;
    }

    &::-moz-range-track {
        @include bs1;
        width: 100%;
        height: 6px;
        cursor: pointer;
        border-radius: 2px;
        border: none;
    }

    &::-ms-track {
        @include bs1;
        width: 100%;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
        height: 6px;
        border-radius: 2px;
        border: none;
    }
}

@mixin input-range-variant($color) {
    /* 滑块 */
    &::-webkit-slider-thumb {
        background-color: lighten($color, 0);
    }

    &::-moz-range-thumb {
        background-color: lighten($color, 0);
    }

    &::-ms-thumb {
        background-color: lighten($color, 0);
    }

    /* 轨道 */
    &::-webkit-slider-runnable-track {
        background-color: rgba($color, 0.5);
    }

    &::-moz-range-track {
        background-color: rgba($color, 0.5);
    }

    &::-ms-fill-lower {
        background-color: rgba($color, 0.5);
    }

    &::-ms-fill-upper {
        background-color: rgba($color, 0.15);
    }

    &:focus {
        &::-webkit-slider-runnable-track {
            background-color: rgba($color, 0.7);
        }

        &::-moz-range-track {
            background-color: rgba($color, 0.7);
        }

        &::-ms-fill-lower {
            background-color: rgba($color, 0.65);
        }

        &::-ms-fill-upper {
            background-color: rgba($color, 0.45);
        }
    }
}

@each $color, $value in $theme-colors {
    input.ic-input[type=range].#{$color} {
        @include input-range-variant($value);
    }
}
